<template>
  <view class="df_neighbor">
    <view class="neighbor_top">
      <image
        class="neighbor_top_img"
        src="https://community.chuangxiangdianli.com/images/neighborimg/circle_bg.png"
        mode=""
      ></image>
      <view class="neighbor_top_nav">
        <navigator
          hover-class="none"
          class="top_nav_item"
          v-for="(item, index) in neighborNavList"
          :key="index"
          :url="item.url"
        >
          <image class="nav_item_img" :src="item.img" mode=""></image>
          <text class="nav_item_txt">{{ item.text }}</text>
        </navigator>
      </view>
    </view>
    <!-- 动态列表 -->
    <view class="neighbor_list">
      <view class="neighbor_li_item" v-for="(item,index) in list" @click="goToInfodetails(item)">
        <view class="li_item_top">
          <image
            class="li_item_top_img"
            src="https://community.chuangxiangdianli.com/images/neighborimg/z_t@2x.png"
            mode=""
          ></image>
          <view class="li_item_top_tit">
            <text>hello, uniapp</text>
            <text style="margin-right: 10rpx">{{item.created_at}}</text>
            <text>发布</text>
          </view>
        </view>
        <view class="li_item_con">
          <view class="item_con_txt">
            <text style="color: #34c29e; margin-right: 10rpx" v-for="v in item.label">#{{v}}</text>
            <text>{{item.content}}</text>
          </view> 
         <view class="item_con_img"
            ><image
			  v-for="v in item.images"
              class="item_con_imgs" 
              :src="v"
              mode=""
            ></image
          ></view>
        </view>
        <view class="li_item_foo">
          <view class="foo_give" @click.stop="dianzan(item)">
            <image
			v-if="item.is_like"
              class="foo_give_img"
              src="https://community.chuangxiangdianli.com/images/neighborimg/z_z_s.png"
              mode=""
            ></image>
			<image
			v-if="!item.is_like"
			  class="foo_give_img"
			  src="https://community.chuangxiangdianli.com/images/neighborimg/z_z_n.png"
			  mode=""
			></image>
            <text class="foo_give_txt">{{item.star||'0'}}</text>
          </view>
          <view class="foo_give">
            <image
              class="foo_give_img"
              src="https://community.chuangxiangdianli.com/images/neighborimg/z_p@2x.png"
              mode=""
            ></image>
            <text class="foo_give_txt">{{item.comment_count||'0'}}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 发布按钮 -->
	<uLi-load-more v-if="list.length>=2" :status="loadingType" :contentText="contentText"></uLi-load-more>
    <view class="release_btn"
      ><image
        src="https://community.chuangxiangdianli.com/images/neighborimg/circle_fa.png"
        mode=""
        @click="goToRelease"
      ></image
    ></view>
  </view>
</template>

<script>
import uLiLoadMore from "@/components/uLi-load-more/uLi-load-more.vue"
var timer = null;
export default {
	components: {
		uLiLoadMore
	},
  data() {
    return {
      neighborNavList: [
        {
          img: "https://community.chuangxiangdianli.com/images/neighborimg/circle_1.png",
          text: "房屋租售",
          url: "/neighbor/house/index",
        },
        {
          img: "https://community.chuangxiangdianli.com/images/neighborimg/circle_2.png",
          text: "跳蚤市场",
          url: "/neighbor/market/index",
        },
        {
          img: "https://community.chuangxiangdianli.com/images/neighborimg/circle_3.png",
          text: "我的发布",
          url: "/neighbor/myrelease/index",
        },
        {
          img: "https://community.chuangxiangdianli.com/images/neighborimg/circle_4.png",
          text: "我的消息",
          url: "/neighbor/myinformation/index",
        },
        {
          img: "https://community.chuangxiangdianli.com/images/neighborimg/circle_5.png",
          text: "家政服务",
          url: "/neighbor/housekeeping/index",
        },
        {
          img: "https://community.chuangxiangdianli.com/images/neighborimg/circle_6.png",
          text: "家教服务",
          url: "/neighbor/tutoring/index",
        },
        {
          img: "https://community.chuangxiangdianli.com/images/neighborimg/circle_7.png",
          text: "废品回收",
          url: "/neighbor/recycling/index",
        },
        {
          img: "https://community.chuangxiangdianli.com/images/neighborimg/circle_8.png",
          text: "搬家公司",
          url: "/neighbor/move/index",
        },
      ],
	  loadingText: '加载中...',
	   loadingType: 'more',//定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
	   contentText: {
	          contentdown:'上拉显示更多',
	          contentrefresh: '正在加载...',
	          contentnomore: '没有更多数据了',
	  },
	  page:1,
	  limit:3,
	  list:[]
    };
  },
  onShow() {
  	this.getlist()
  },
  onReachBottom: function() {
  	console.log(1)
  	var that=this;
  		//触底的时候请求数据，即为上拉加载更多
  		//为了更加清楚的看到效果，添加了定时器
  		console.log('上拉')
         if (timer != null) {
             clearTimeout(timer);
         }
         timer = setTimeout(function() {
  		   if (that.loadingType !== 'more') {//loadingType!=0;直接返回
  		         return false;
  		    }
  		    that.loadingType = 'loading';
  		    uni.showNavigationBarLoading();//显示加载动画
  		   that.page++;
  		   console.log(that.page)
             that.getlist()
         }, 1000);
  			
  },
  methods: {
	 dianzan(v){
			this.$mrequest2({
				url:'Mini/circle/like',
				method:'GET',
				data:{
					circle_id:v.id
				}
			}
			).then((res)=>{ 
				uni.showToast({
					title:res.msg,
					success: () => {
						v.is_like=!v.is_like
						if(v.is_like){
							v.star=1+v.star
						}else{
							v.star=v.star-1
						}
					}
				})
			})
	 },
    goToRelease() {
      uni.navigateTo({
        url: "/neighbor/release/index",
      });
    },
	// 消息详情
	goToInfodetails(v){
		uni.navigateTo({
			url: '/neighbor/infodetails/index?id='+v.id
		})
	},
	getlist(fx){
		this.$mrequest2({
			url:'Mini/circle/getCircle',
			method:'GET',
			data:{
				page:this.page,
				limit:this.limit
			}
		}
		).then((res)=>{ 
			if (res.code == 200) {
				if(this.page>1){
					if(res.data.data.length>0){
						this.list.push(...res.data.data)
					}else{
						this.loadingType = 'noMore';//将loadingType归0重置
						uni.hideNavigationBarLoading();//关闭加载动画
					}
				}else{
					this.list = []
					this.list=res.data.data
					uni.showNavigationBarLoading();
					uni.hideNavigationBarLoading();
					uni.stopPullDownRefresh();//得到数据后停止下拉刷新
				}
			}else{
				uni.hideNavigationBarLoading();//关闭加载动画
				 uni.showNavigationBarLoading();
				uni.hideNavigationBarLoading();
				uni.stopPullDownRefresh();//得到数据后停止下拉刷新
			}
			if(fx){
				fx()
			}

		})
	}
  },
};
</script>

<style lang="scss">
.df_neighbor {
  .neighbor_top {
    position: relative;
    height: 455rpx;
    .neighbor_top_img {
      width: 100%;
      height: 100%;
    }
    .neighbor_top_nav {
      padding-top: 40rpx;
      display: flex;
      flex-wrap: wrap;
      position: absolute;
      width: 690rpx;
      height: 389rpx;
      top: 200rpx;
      left: 50%;
      transform: translateX(-50%);
      background: #fff;
      box-shadow: 0px 0px 29rpx 0rpx rgba(199, 199, 199, 0.35);
      border-radius: 25rpx;
      .top_nav_item {
        width: 25%;
        display: flex;
        flex-direction: column;
        text-align: center;
        .nav_item_img {
          margin: 0 auto 10rpx auto;
          width: 88rpx;
          height: 88rpx;
        }
      }
    }
  }
  .neighbor_list {
    padding-top: 154rpx;
    overflow: hidden;
    .neighbor_li_item {
      padding: 30rpx;
      margin-bottom: 26rpx;
      float: right;
      width: 720rpx;
      background: #fff;
      box-shadow: 0px 5rpx 13rpx 0px rgba(159, 174, 168, 0.14);
      border-radius: 30rpx;
      .li_item_top {
        display: flex;
        height: 90rpx;
        .li_item_top_img {
          margin-right: 20rpx;
          width: 89rpx;
          height: 89rpx;
          border-radius: 50%;
        }
        .li_item_top_tit {
          font-size: 24rpx;
          color: #999;
          line-height: 45rpx;
          & text:nth-child(1) {
            color: #333;
            font-size: 30rpx;
            display: block;
          }
        }
      }
      .li_item_con {
        // min-height: 280rpx;
        .item_con_txt {
          font-size: 24rpx;
          color: #999;
        }
        .item_con_img {
          margin: 10rpx 0;
          .item_con_imgs {
            width: 200rpx;
			height: 200rpx;
          }
        }
      }
      .li_item_foo {
        display: flex;
        height: 90rpx;
        line-height: 90rpx;
        .foo_give {
          margin-right: 20rpx;
          display: flex;
          .foo_give_img {
            margin: auto 10rpx auto 0;
            width: 30rpx;
            height: 30rpx;
          }
        }
      }
    }
  }
  .release_btn {
    position: fixed;
    bottom: 10rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 143rpx;
    height: 143rpx;
  }
}
</style>
